<template>
  <page-layout>

    <a-row :gutter="[10, 10]">
      <a-col :span="24">
        <a-page-header
          class="page-head"
          style="background: #fff;"
          title="新增活动"
          @back="() => $router.back()">
          <template v-slot:extra>
            <a-button type="primary">保存</a-button>
          </template>
        </a-page-header>
        <div class="pre-title">基础信息</div>
      </a-col>
      <a-col :span="24">
        <a-card>
          <a-form :model="modelFrom" :rules="formRules" :labelCol="{span: 9}" ref="modelFrom">
            <a-row>
              <a-col :span="12">
                <a-form-item label="活动名称" :labelCol="{span: 6}" ref="name" name="name">
                  <a-input v-model="modelFrom.name" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="活动时间" :labelCol="{span: 4}" ref="time" name="time">
                  <a-range-picker
                    style="width:100%"
                    :defaultValue="[]"
                    :show-time="{ format: 'HH:mm:ss' }"
                    format="YYYY-MM-DD HH:mm:ss"
                    :placeholder="['开始时间', '结束时间']"
                    @change="onTimeChange"
                    @ok="onTimeOk"/>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="活动介绍" :labelCol="{span: 3}" ref="content" name="content">
                  <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" v-model="modelFrom.content" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="活动预算" ref="activityBudget" name="activityBudget">
                  <a-input v-model="modelFrom.activityBudget" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="活动负责人" ref="user" name="user">
                  <a-input v-model="modelFrom.user">
                    <template #addonAfter>
                      <div class="primary-color cursor-pointer" @click="openDialog('visibleUserTree')">选择</div>
                    </template>
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="所在学校" ref="school" name="school">
                  <a-input v-model="modelFrom.school">
                    <template #addonAfter>
                      <div class="primary-color cursor-pointer" @click="openDialog('universityVisible')">选择</div>
                    </template>
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="活动类型" ref="type" name="type">
                  <a-input v-model="modelFrom.type" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="预计签约金额" ref="price" name="price">
                  <a-input v-model="modelFrom.price" suffix="元"/>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="渠道" :labelCol="{span: 3}" ref="content" name="content">
                  <div class="content-box">
                    <a-tag v-for="(item, index) in 30" :key="index" closable @close="handleClose">
                      {{item}}
                    </a-tag>
                    <span class="selects" @click="handleSelect('channelVisible')">选择</span>
                  </div>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="引流目的地" :labelCol="{span: 3}" ref="flag" name="flag">
                  <a-radio-group name="radioGroup" :default-value="modelFrom.flow">
                    <a-radio
                      v-for="(item, index) in plainOptions"
                      :key="index"
                      :value="Number(item.value)"
                      @change="onChangeRadio">
                    {{item.label}}
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <div>{{modelFrom.flow}}</div>
              <a-col v-if="planeA" :span="24">
                <a-form-item class="form-label" label=" " :labelCol="{span: 3}" :wrapperCol="{span: 10}">
                  <a-radio :default-value="modelFrom.flows">
                    是否给校园大使结算薪资
                  </a-radio>
                </a-form-item>
              </a-col>
              <a-col v-if="planeB" :span="24">
                <a-form-item label="目的地" :labelCol="{span: 3}" :wrapperCol="{span: 10}" ref="flag" name="flag">
                  <a-input v-model="modelFrom.flag" />
                </a-form-item>
              </a-col>
              <a-col v-if="planeC" :span="24">
                <a-form-item label="销售" :labelCol="{span: 3}" ref="sale" name="sale">
                  <div class="content-box">
                    <a-tag v-for="(item, index) in 30" :key="index" closable @close="handleClose">
                      {{item}}
                    </a-tag>
                    <span class="selects" @click="handleSelect('visibleUserTree')">选择</span>
                  </div>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-card>
        <div class="pre-title">附件信息</div>
        <a-card>
          <a-form>
            <a-row>
              <a-col :span="24">
                <a-form-item label="合同" :labelCol="{span: 3}" :wrapperCol="{span: 10}">
                  <a-upload
                    name="file"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    :headers="headers"
                    @change="handleChange">
                    <a-button> <a-icon type="upload" />上传文件</a-button>
                  </a-upload>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="其他附件" :labelCol="{span: 3}" :wrapperCol="{span: 10}">
                  <a-upload
                    name="file"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    :headers="headers"
                    @change="handleChange">
                    <a-button> <a-icon type="upload" />上传文件</a-button>
                  </a-upload>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
    <school :visible="formState.universityVisible"
                @selectUniversity="selectUniversity"
                @close="closeDialog"
    />
    <channel :visible="formState.channelVisible"
                @selectUniversity="selectUniversity"
                @close="closeChannelDialog"
    />
    <userTree :visible="formState.visibleUserTree" @close="closeGive" :record="formState.recordGive"></userTree>
  </page-layout>
</template>

<script>
import school from './modal/school.vue'
import channel from './modal/channel.vue'
import userTree from './modal/user-tree'

import { computed, reactive } from 'vue'
export default {
  components: {
    school,
    userTree,
    channel
  },
  watch: {
    'modelFrom.flow': {
      handler(value) {
        console.log('value', value==1)
      },
      deep: true
    }
  },
  setup() {
    const modelFrom = reactive({
      name: '',
      flow: 3
    })

    const closeGive = function(){
        formState.visibleUserTree = false;
    }
    const planeA = computed(() => modelFrom.flow == 1)
    const planeB = computed(() => modelFrom.flow == 2)
    const planeC = computed(() => modelFrom.flow == 3)
    const formState = reactive({
      name: '',
      department: '',
      post: '',
      universe: '',
      charge: '',
      phone: '',
      email: '',
      sex: '',
      status: '',
      address: '',
      universityVisible: false,
      channelVisible: false,
      visibleUserTree: false,
      recordGive: {},
    })
    const labelCol = { span: 3, offset: 12 }
    const wrapperCol = { span: 14 }
    const formRules = {
      name: [{ required: true, message: '请输入TA姓名', trigger: 'blur'}],
      sex: [{ required: true, message: '请输入性别', trigger: 'blur'}],
      content: [{ required: true, message: '请输入活动介绍', trigger: 'blur'}],
      type: [{ required: true, message: '请选择证件类型', trigger: 'blur'}],
      num: [{ required: true, message: '请输入证件号', trigger: 'blur'}],
    }

    const openDialog = (type) => {
      formState[type] = true
    }
    const handleChange = (value) => {
      console.log('value: handleChange', value);
    }

    const closeDialog = (type) => {
      console.log('type: closeDialog', type);
      formState[type] = false
    }
    const closeChannelDialog = (type) => {
      formState[type] = false
    }

    const selectUniversity = (value) => {
      console.log(value, 'value')
    }

    const onTimeChange = (value) => {
      console.log('value: ', value);
    }
    const onTimeOk = (value) => {
      console.log('value: ', value);
    }
    const onChangeRadio = (value) => {
      modelFrom.flow = value.target.value
      console.log('modelFrom.flow: ', modelFrom.flow);
    }
    const handleClose = (value) => {
      console.log('value: ', value);
    }
    const handleSelect = (value) => {
      formState[value] = true;
    }
    const plainOptions = [
      { label: '公众号', value: '1' },
      { label: '网页', value: '2' },
      { label: '销售微信', value: '3' },
    ];
    return {
      modelFrom,
      formRules,
      labelCol,
      wrapperCol,
      openDialog,
      formState,
      handleChange,
      selectUniversity,
      closeDialog,
      onTimeChange,
      onTimeOk,
      plainOptions,
      onChangeRadio,
      handleClose,
      handleSelect,
      planeA,
      planeB,
      planeC,
      closeGive,
      closeChannelDialog,
    }   
  }
}
</script>

<style lang="less" scoped>
  .page-head {

    /deep/ .ant-page-header-heading-title {
      color: #2d8cf0;
    }
  }

  .pre-title {
    padding: 10px 25px;
    background-color: #f5f5f5;
    color: #555;
  }

  .content-box {
    position: relative;
    width: 100%;
    min-height: 50px;
    border: 1px solid #d9d9d9;
    background-color: #fff;
    background-image: none;
    border-radius: 2px;
    padding: 10px 40px 10px 10px;

    .selects {
      position: absolute;
      color: #2d8cf0;
      right: 5px;
      cursor: pointer;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .form-label {

    /deep/ .ant-form-item-label > label::after {
      content: '' !important;
    }
  }
</style>